<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 可视化分析淘宝双11</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <link type='text/css' href="css/style.css" rel="stylesheet"/>
    <!--    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->
    <!--    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>-->
</head>

<body>
<div class='header'>
    <p>ECharts 可视化分析淘宝双11</p>
</div>
<div class="content">
    <div class="nav">
        <ul>
            <li><a href="index">所有买家各消费行为对比</a></li>
            <li><a href="index1">男女买家交易对比</a></li>
            <li class="current"><a href="#">男女买家各个年龄段交易对比</a></li>
            <li><a href="index3">商品类别交易额对比</a></li>
            <li><a href="index4">各省份的总成交量对比</a></li>
        </ul>
    </div>
    <div class="container" style="width: 700px;height: 700px">
        <div class="title">男女买家各个年龄段交易对比</div>
        <div class="show">
            <div class='chart-type'>散点图</div>
            <div id="main"></div>
        </div>
    </div>
</div>
<script>
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var data = [];
    data[0] = [];
    data[1] = [];

    //AJAX接收数据主体
    $.ajax({
        type: "GET",
        url: "/ageRange",
        dataType: "json",
        async: false,
        success: function (result) {

            for (var i = 0; i < result.length; i++) {
                var gender = result[i].gender;
                var ageRange = result[i].age_range;
                var num = result[i].num;
                if (result[i].gender === '0') {
                    data[0].push([ageRange, num, num])
                } else if (result[i].gender === '1') {
                    data[1].push([ageRange, num, num])
                }
            }
        },
        error: function (errorMsg) {
            alert("获取后台数据失败！");
        }
    });

    var option = {
        backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
            offset: 0,
            color: '#f7f8fa'
        }, {
            offset: 1,
            color: '#cdd0d5'
        }]),
        title: {
            text: '男女买家各个年龄段交易对比'
        },
        legend: {
            right: 10,
            data: ['women', 'men']
        },
        xAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            scale: true
        },
        series: [{
            name: 'women',
            data: data[0],
            type: 'scatter',
            symbolSize: function (data) {
                return Math.sqrt(data[2]) / 1e0;
            },
            label: {
                emphasis: {
                    show: true,
                    formatter: function (param) {
                        return param.data[3];
                    },
                    position: 'top'
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(120, 36, 50, 0.5)',
                    shadowOffsetY: 5,
                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                        offset: 0,
                        color: 'rgb(251, 118, 123)'
                    }, {
                        offset: 1,
                        color: 'rgb(204, 46, 72)'
                    }])
                }
            }
        }, {
            name: 'men',
            data: data[1],
            type: 'scatter',
            symbolSize: function (data) {
                return Math.sqrt(data[2]) / 1e0;
            },
            label: {
                emphasis: {
                    show: true,
                    formatter: function (param) {
                        return param.data[3];
                    },
                    position: 'top'
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(25, 100, 150, 0.5)',
                    shadowOffsetY: 5,
                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                        offset: 0,
                        color: 'rgb(129, 227, 238)'
                    }, {
                        offset: 1,
                        color: 'rgb(25, 183, 207)'
                    }])
                }
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
